// 轮播管理子组件 编辑与添加共用弹框
import React, { useEffect } from 'react';
import { Button, Modal, message, Form, Input, InputNumber } from 'antd';
import '../../../css/AddorRev.css'
import { setLocationShop } from '../../../../api/opreationApi'

// 参数
interface PropsType {
  modalClose(): void,
  isModalOpen: boolean,
  nowRow: any
  getData(): void
}

export default function AddorRev(props: PropsType) {

  const [form] = Form.useForm();
  // 初始化
  useEffect(() => {
    //去修改form表单里面的默认值
    form.setFieldsValue({
      location: props.nowRow?.location,
    })
  }, [props])



  // 对话框部分
  const handleOk = () => {
    props.modalClose()
  };

  const handleCancel = () => {
    props.modalClose()
  };
  // 表单部分
  const onFinish = (values: any) => {
    setLocationShop({
      tsaId: Number(sessionStorage.getItem('tsaId')),
      goodsId: props.nowRow.goodsId,
      location: values.location
    }).then(res => {
      props.getData()
      message.success('修改位置成功！')
      props.modalClose()
    })
  };






  return (
    <>
      <Modal title='设置位置' open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          {/* 位置 */}
          <Form.Item
            label="位置"
            name="location"
            rules={[{ required: true, message: '请输入位置！' }]}
            initialValue={props.nowRow?.location}
          >
            <InputNumber placeholder="请输入位置！" />
          </Form.Item>
          <Form.Item className='explain' style={{ marginLeft: 70, width: 500 }}>
            说明：位置序号越大,排序越靠前
          </Form.Item>
          {/* 操作按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>
            <Button type="primary" htmlType="submit" className='submit'>提交</Button>
            <Button type="primary" onClick={handleCancel} className='cancel'>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
